<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>主页</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!--link-->
    <link type="text/css" rel="stylesheet" href="/css/style.css" />
    <!--js-->

    <script src="/js/jquery.min.js"></script>
    <script src="/js/playdate.js"></script>

    <script src="/js/echarts.min.js"></script>
    <style>
        .havior_bg {
            background-color: #53a8f9;
            width:98%;
            height:95%;
            position:absolute;
            top:0;
            left:0;
            border-radius:20px;
            padding:1%;
            overflow:hidden;
        }
        .havior_title{
            width:100%;
            /*margin:1%;*/
            height:50px;
            line-height:50px;
            background-color:#fff;
            border-radius:7px;
        }

        .havior_title input[type=text] {
            width: 250px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #53a8f9;
            margin-left: 20px;
            margin-top: 8px;
            float: left;
            padding-left: 0.5rem;
            border-radius:5px;
            outline:none;
        }
        .havior_title input[type=button] {
            width: 80px;
            height: 34px;
            line-height: 34px;
            border: none;
            margin-left: 10px;
            margin-top: 8px;
            float: left;
            background-color: #53a8f9;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }

        .havior_user{
            width:50%;
            float:right;
            height:50px;
            line-height:50px;
        }
        .havior_user div {
            width: 40%;
            float: right;
            font-size: 16px;
            color: #53a8f9;
            font-weight:bold;
            text-align:right;
            margin-right:5%;
        }
        .havior_user img{
            width:26px;
            float:right;
            margin-top:14px;
            margin-right:10%;
            cursor:pointer;
        }

        /*	 .tb_hide{
                 display:none;
             }
    */
        .havior_body {
            width: 100%;
            height: calc(98% - 60px);
            margin-top: 20px;
            position:relative;
        }

        .havior_body .havior_body_left{
            width:18%;
            height:100%;
            /* background-color:#fff;*/
            padding-top:2%;
            float:left;
        }
        .havior_body .havior_body_left .havior_item {
            width: 80%;
            height: 55px;
            line-height: 55px;
            margin-bottom: 15%;
            margin-left: 10%;
            border-radius: 30px;
            text-align: center;
            font-size: 17px;
            font-weight: bold;
            background-image: linear-gradient(to right, #3c9ef5, #61b0ff,#3c9ef5);
            color: #fff;
            box-shadow: 0 0 0 0 green, /*左边阴影;*/
            0 -2px 4px -1px #2b5a86, /*顶部阴影 */
            0 1px 3px -1px #fff, /*底部阴影 */
            2px 0 4px -1px #54a2f4; /*右边阴影*/
            cursor: pointer;
            letter-spacing:1px;
        }

        .havior_item_check {
            color: #58abef !important;
            background-image: linear-gradient(to right, #fff,#fff,#fff) !important;
        }

        .havior_body_right{

            width:80%;
            height:100%;
            margin-left:2%;
            float:left;
            padding-top:2%;
        }

        .havior_body_right .havoir_data_1 {
            width: 60%;
            height: 55%;
            float: left;
            background-color: #fff;
            border-radius:15px;
        }
        .havior_body_right .havoir_data_1 .data_1_item{
            width:33%;
            height:50%;
            float:left;
            /*			 border:1px solid #000;*/
            text-align:center;
            font-size:14px;
            position:relative;
        }
        .havior_body_right .havoir_data_1 .data_1_item p {
            float: left;
            width:100%;
            margin-top:20px;
            letter-spacing:1px;
        }
        .havior_body_right .havoir_data_1 .data_1_item div {
            background-color: #3999ef;
            color: #fff;
            padding: 5px 30px;
            float:left;
            border-radius: 8px;
            margin-top:25%;
        }
        .data_1_item_orange {
            background-color: #ee7e18 !important;
        }

        .data_boder_right_bottom {
            border-right: 0.5px solid #e2e2e2;
            border-bottom: 0.5px solid #e2e2e2;
        }
        .data_boder_bottom {
            border-bottom: 0.5px solid #e2e2e2;
        }
        .data_boder_right {
            border-right: 0.5px solid #e2e2e2;
        }

        .data_margin_spacing_22 {
            margin-left: 22%;
        }
        .data_margin_spacing_20 {
            margin-left: 20%;
        }
        .data_margin_spacing_13 {
            margin-left: 13%;
        }
        .data_margin_spacing_10 {
            margin-left: 10%;
        }
        .data_margin_spacing_15 {
            margin-left: 15%;
        }
        .data_margin_spacing_25 {
            margin-left: 25%;
        }

        .havoir_data_2 {
            width: 38%;
            height: 55%;
            float: left;
            margin-left: 2%;
            background-color: #fff;
            border-radius: 15px;
        }

        #main, #main2, #main3, #main4, #main5, #main6, #main7 {
            width: 100%;
            height: 100%;
        }
        .havior_data_3, .havior_data_4 {
            width: 96%;
            height: 36%;
            background-color: #fff;
            float: left;
            margin-top: 1%;
            border-radius: 15px;
            padding: 1% 2%;
            font-size: 14px;
        }
        .havior_data_3 div {
            width:90%;
            height: 40px;
            line-height: 40px;
            margin-left:2%;
            border-bottom: 1px solid #e2e2e2;
        }
        .bg_green {
            background-color: #6fdc4f;
        }
        .bg_yellow {
            background-color: #ffd300;
        }

        .bg_purple {
            background-color: #8180ff;
        }
        .bg_blue {
            background-color: #59b0ff;
        }
        .havior_data_4 div {
            width: 22%;
            height: 92%;
            margin: 1% 1%;
            float: left;
            border-radius: 15px;
        }

        .havior_data_4 div .data4_title {
            width: 45%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fff;
            border-radius: 10px;
            margin:5% 27.5%;
        }

        .havior_data_4 div .data_4_content {
            width: 100%;
            height: calc(80% - 33px);
            line-height: 120px;
            text-align: center;
            color: #fff;
            font-size:30px;
        }
        .havior_data_4 div .line{
            width:20%;
            height:3px;
            background-color:#fff;
            margin-left:calc(80% / 2);
        }

        .havior_data_5{
            width: 96%;
            height: 42%;
            background-color: #fff;
            float: left;
            border-radius: 15px;
            padding: 1% 2%;
            font-size: 14px;
            margin-bottom:2%;
        }

        .havior_data_5 .data5_container {
            width: 32%;
            height: 80%;
            border-right: 1px solid #9ccbf7;
            float: left;
            margin-top:3%;
            padding-left:10px;
        }
        .no_boder{
            border:none !important;
        }
        .data5_title {
            width: 20%;
            height: 30px;
            line-height: 30px;
            background-color: #ee7e18;
            color:#fff;
            text-align:center;
            border-radius:5px;
        }
        .data5_rate{
            margin-top:10px;
        }
        .color_orange {
            color: #fbd005;
        }
        .color_red {
            color: #e60517;
        }
        .color_green {
            color: #4fab2f;
        }
        .data5_rate span {
            font-size: 30px;
            margin-right:5px;
        }
        .data5_text{
            margin-top:10%;
            margin-bottom:5%;
        }

        .havior_data_6{
            width:30%;
            height:40%;
            float:left;
            background-color:#fff;
            margin-left:3%;
            border-radius:10px;
        }
    </style>

</head>
<body>

<div class="havior_bg">
    <div class="havior_title">
        <input type="text" placeholder="选择日期" class="laydate_m2 lay_type_ym" readonly="">
        <input type="button" value="查询" />

        <div class="havior_user">
            <img src="/img/report.png" />
            <div>张三的数据报告</div>

        </div>
    </div>

    <div class="havior_body">
        <div class="havior_body_left">
            <div data-id="tb1" class="havior_item havior_item_check">睡眠行为报告</div>
            <div data-id="tb2" class="havior_item">睡眠质量报告</div>
            <div data-id="tb3" class="havior_item">静息数据报告</div>
            <div data-id="tb4" class="havior_item">周期睡眠分析</div>
        </div>
        <!--睡眠行为报告-->
        <div class="havior_body_right tb_hide" id="tb1">
            <div class="havoir_data_1">
                <div class="data_1_item data_boder_right_bottom"><div class="data_margin_spacing_22">上床时间点</div><p>20:26分</p></div>
                <div class="data_1_item data_boder_right_bottom"><div class="data_margin_spacing_20">首次入睡时间点</div><p>20:26分</p></div>
                <div class="data_1_item data_boder_bottom"><div class="data_margin_spacing_22">中途起床次数</div><p>5次</p></div>
                <div class="data_1_item data_boder_right"><div class="data_1_item_orange data_margin_spacing_13">最后一次起床时间点</div><p>06:11分</p></div>
                <div class="data_1_item data_boder_right"><div class="data_1_item_orange data_margin_spacing_10">首次入睡所花费的时长</div><p>1小时2分</p></div>
                <div class="data_1_item"><div class="data_1_item_orange data_margin_spacing_15">中途离床的总时间</div><p>2小时2分</p></div>
            </div>
            <div class="havoir_data_2">
                <div id="main"></div>
            </div>

            <div class="havior_data_3">
                <p>在离床记录：</p>
                <div>12日22:25分，离开床位</div>
                <div>12日22:45分，返回床位</div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <!--睡眠质量报告-->
        <div class="havior_body_right tb_hide" id="tb2">
            <div class="havoir_data_1">
                <div class="data_1_item data_boder_right_bottom"><div class="data_margin_spacing_20">清醒总时间长度</div><p>2小时2分</p></div>
                <div class="data_1_item data_boder_right_bottom"><div class="data_margin_spacing_20">浅睡总时间长度</div><p>1小时2分</p></div>
                <div class="data_1_item data_boder_bottom"><div class="data_margin_spacing_20">深睡总时间长度</div><p>5小时2分</p></div>
                <div class="data_1_item data_boder_right"><div class="data_1_item_orange data_margin_spacing_25">体动总次数</div><p>100次</p></div>
                <div class="data_1_item data_boder_right"><div class="data_1_item_orange data_margin_spacing_25">体动总时间</div><p>1小时13分</p></div>
                <div class="data_1_item"><div class="data_1_item_orange data_margin_spacing_22">体动频繁程度</div><p>高</p></div>
            </div>
            <div class="havoir_data_2">
                <div id="main2"></div>
            </div>

            <div class="havior_data_4">
                <div id="main7"></div>
                <!--<div class="bg_green">
                    <div class="data4_title">清醒的时间段</div>
                    <div class="data_4_content">08:00~10:00</div>
                    <div class="line"></div>
                </div>
                <div class="bg_yellow">
                    <div class="data4_title">浅睡的时间段</div>
                    <div class="data_4_content">12:00~14:00</div>
                    <div class="line"></div>
                </div>
                <div class="bg_purple">
                    <div class="data4_title">深睡的时间段</div>
                    <div class="data_4_content">01:00~06:00</div>
                    <div class="line"></div>
                </div>
                <div class="bg_blue">
                    <div class="data4_title">体动的时间段</div>
                    <div class="data_4_content">08:00~10:00</div>
                    <div class="line"></div>
                </div>-->
            </div>
        </div>


        <!--静息数据报告-->
        <div class="havior_body_right tb_hide" id="tb3">
            <div class="havior_data_5">
                <div class="data5_container">
                    <div class="data5_title">最高心率</div>
                    <div class="data5_rate color_orange"><span>150</span>次/分</div>
                    <div class="data5_text">过速的心率（未发现）</div>
                    <div class="data5_content">__</div>
                </div>
                <div class="data5_container">
                    <div class="data5_title">最低心率</div>
                    <div class="data5_rate color_red"><span>40</span>次/分</div>
                    <div class="data5_text">过缓的心率（未发现）</div>
                    <div class="data5_content">__</div>
                </div>
                <div class="data5_container no_boder">
                    <div class="data5_title">基准心率</div>
                    <div class="data5_rate color_green"><span>77</span>次/分</div>
                </div>
            </div>

            <div class="havior_data_5">
                <div class="data5_container">
                    <div class="data5_title">最高呼吸率</div>
                    <div class="data5_rate color_orange"><span>50</span>次/分</div>
                    <div class="data5_text">过速的呼吸（未发现）</div>
                    <div class="data5_content">__</div>
                </div>
                <div class="data5_container">
                    <div class="data5_title">最低呼吸率</div>
                    <div class="data5_rate color_red"><span>20</span>次/分</div>
                    <div class="data5_text">过缓的呼吸（未发现）</div>
                    <div class="data5_content">__</div>
                </div>
                <div class="data5_container no_boder">
                    <div class="data5_title">基准呼吸率</div>
                    <div class="data5_rate color_green"><span>43</span>次/分</div>
                </div>
            </div>
        </div>

        <!--静息数据报告-->
        <div class="havior_body_right" id="tb4">
            <div class="havior_data_5" style="height:50%;">
                <div id="main3"></div>
            </div>
        </div>

        <div id="tb4_bottom" style="position:absolute;bottom:-55%;left:0;width:100%;height:90%;">
            <div class="havior_data_6">
                <div id="main4"></div>
            </div>
            <div class="havior_data_6">
                <div id="main5"></div>
            </div>
            <div class="havior_data_6">
                <div id="main6"></div>
            </div>
        </div>

    </div>
</div>
</body>
</html>

<script type="text/javascript">

    var m2daconfig = laydate.render({
        elem: '.laydate_m2',
        eventElem: '.laydate_m2_fa .layicon',
        theme: 'type-ym',
        trigger: 'click',
        btns: [],
        type: 'date',
        newType: 'date',
    });




    // 基于准备好的dom，初始化echarts实例

    var main = document.getElementById('main');
    var main2 = document.getElementById('main2');
    var main3 = document.getElementById('main3');
    var main4 = document.getElementById('main4');
    var main5 = document.getElementById('main5');
    var main6 = document.getElementById('main6');
    var main7 = document.getElementById('main7');
    var charts = [];



    ///图1
    var mychart = echarts.init(main);
    var option = {
        series: [
            {
                center: ['50%', '55%'],
                radius: '70%',
                type: 'gauge',
                startAngle: 220,
                endAngle: -40,
                min: 0,
                max: 23,
                roundCap: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#297FFE' }, //柱图渐变色
                        { offset: 1, color: '#08E5FF' } //柱图渐变色
                    ]),
                    shadowColor: '#297FFE',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                },
                progress: {
                    // show:false,
                    roundCap: true,
                    show: true,
                    width: 12
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 12
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 80,
                    offsetCenter: [0, '0%'],
                    formatter: function (value) {
                        return '{value|' + value + '}{unit|小时}'
                    },
                    rich: {
                        value: {
                            fontSize: 28,
                            fontWeight: 'bolder',
                            color: '#15A9F1'
                        },
                        unit: {
                            fontSize: 12,
                            color: '#15A9F1',
                            padding: [0, 0, -10, 10]
                        }
                    }
                },
                data: [
                    {
                        value: 10,
                        name: '10小时55分'
                    }
                ],
                title: {
                    color: '#00EBEE',
                    fontSize: 14,
                    offsetCenter: [0, '80%']
                }
            }
        ]
    };
    mychart.setOption(option);
    charts.push(mychart);


    //图2
    mychart = echarts.init(main2);
    option = {
        title: {
            text: '睡眠评分',
            x: "40%",
            y: "10%",
            textStyle: {
                fontSize: 16,
                fontWeight: 'bolder',
                color: '#333'          // 主标题文字颜色
            },
        },
        series: [{
            center: ["50%", "80%"], // 仪表位置
            radius: "100%", //仪表大小
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
                lineStyle: {
                    width: 6,
                    color: [
                        [0.25, '#FF6E76'],
                        [0.5, '#FDDD60'],
                        [0.75, '#58D9F9'],
                        [1, '#7CFFB2']
                    ]
                }
            },
            pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '15%',
                width: 10,
                offsetCenter: [0, '-40%'],
                itemStyle: {
                    color: 'auto'
                }
            },
            axisTick: {
                length: 12,
                lineStyle: {
                    color: 'auto',
                    width: 2
                }
            },
            splitLine: {
                length: 20,
                lineStyle: {
                    color: 'auto',
                    width: 2
                }
            },
            axisLabel: {
                color: '#464646',
                fontSize: 20,
                distance: -60,
                formatter: function (value) {
                    if (value === 0.875) {
                        return 'A';
                    } else if (value === 0.625) {
                        return 'B';
                    } else if (value === 0.375) {
                        return 'C';
                    } else if (value === 0.125) {
                        return 'D';
                    }
                    return '';
                }
            },
            title: {
                offsetCenter: [0, '-20%'],
                fontSize: 30
            },
            detail: {
                fontSize: 40,
                offsetCenter: [0, '0%'],
                valueAnimation: true,
                formatter: function (value) {
                    return Math.round(value * 100) + '分';
                },
                color: '#50b332'
            },
            data: [
                {
                    value: 0.7,
                    name: ''
                }
            ]
        }
        ]
    };
    mychart.setOption(option);
    charts.push(mychart);



    //图3
    mychart = echarts.init(main3);
    let date = [];
    var data = [];
    var max = 12;
    var min = 0;
    var d = new Date();
    var curMonthDays = new Date(d.getFullYear(), (d.getMonth() + 1), 0).getDate();
    for (let i = 0; i < curMonthDays; i++) {
        date[i] = (i + 1);//"日期：" + d.getFullYear() + "." + (d.getMonth() + 1)+"."+
        data[i] = Math.floor(Math.random() * (max - min + 1) + min);
    }
    option = {
        title: {
            text:"每天睡眠时长连线图",
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        //yAxis: {
        //	type: 'value',
        //	boundaryGap: [0, '100%'],
        //	axisLabel: {
        //		formatter: function (value, index) {

        //			//var html = "日期：" + d.getFullYear() + "." + d.getMonth() + params.value + "\n";
        //			//html += "时长：" + data[params.dataIndex];
        //			var date = new Date(value);
        //			var texts = [(date.getMonth() + 1), date.getDate()];
        //			if (index == 0) {
        //				texts.unshift(date.getYear());
        //			}
        //			return texts.join('/');
        //		}
        //	}

        //},
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: data,
                type: 'line',
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                showSymbol: false,

                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }
                    ])
                },
            }
        ]
    };
    mychart.setOption(option);
    charts.push(mychart);


    ///图4
    var data1 = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
    var dateList = data1.map(function (item) {
        return item[0];
    });
    var valueList = data1.map(function (item) {
        return item[1];
    });
    mychart = echarts.init(main4);
    option = {
        // Make gradient line here
        backgroundColor: ['#f59e4f'], // 全图默认背景
        grid: [{
            bottom: '10%'
        }, {
            top: '60%'
        }, {
            show: false,
            borderWidth: 1,
            // borderColor: '#FF0000' // 网格的边框颜色
        }],
        // 视觉映射组件，用于进行『视觉编码』
        visualMap: [{
            show: false, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
            type: 'continuous', // 定义为连续型 visualMap
            seriesIndex: 0, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列
            min: 0, // 指定 visualMapPiecewise 组件的最小值。
            max: 400
        }],
        title: [{
            left: 'left',
            text: '每天体动次数连线图',
        }
        ],
        // 提示框组件
        tooltip: {
            trigger: 'axis' // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用/none什么都不触发
        },
        xAxis: [{
            data: date,
            show: true //是否显示x轴
        }, {
            data: dateList,
            show:false,
            gridIndex: 1 // x 轴所在的 grid 的索引，默认位于第一个 grid。
        }],
        yAxis: [{
            nameTextStyle: { // 坐标轴名称的文字样式。
                color: '#fff',
                fontWeight: 'bold', // 坐标轴名称文字字体的粗细
                fontSize: 15
            },
            splitLine: {
                show: false, // x轴、y轴显示网格线,坐标轴在 grid 区域中的分隔线
                lineStyle: {
                    // 使用深浅的间隔色--分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                    color: ['#4F5258', '#30394F']
                }
            }
        },
            {
                splitLine: { show: false },
                gridIndex: 1
            }
        ],
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
            type: 'line', // 线条
            showSymbol: false, // 是否显示 symbol符号, 如果 false 则只有在 tooltip hover 的时候显示。
            data: valueList,
            lineStyle: { color: '#FFF' }, // 线条样式
        }
        ]
    }
    mychart.setOption(option);
    charts.push(mychart);


    ///图5
    mychart = echarts.init(main5);
    option = {
        // Make gradient line here
        backgroundColor: ['#ffd300'], // 全图默认背景
        grid: [{
            bottom: '10%'
        }, {
            top: '60%'
        }, {
            show: false,
            borderWidth: 1,
            // borderColor: '#FF0000' // 网格的边框颜色
        }],
        // 视觉映射组件，用于进行『视觉编码』
        visualMap: [{
            show: false, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
            type: 'continuous', // 定义为连续型 visualMap
            seriesIndex: 0, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列
            min: 0, // 指定 visualMapPiecewise 组件的最小值。
            max: 400
        }],
        title: [{
            left: 'left',
            text: '基准心率连线图',
        }
        ],
        // 提示框组件
        tooltip: {
            trigger: 'axis' // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用/none什么都不触发
        },
        xAxis: [{
            data: date,
            show: true //是否显示x轴
        }, {
            data: dateList,
            show: false,
            gridIndex: 1 // x 轴所在的 grid 的索引，默认位于第一个 grid。
        }],
        yAxis: [{
            nameTextStyle: { // 坐标轴名称的文字样式。
                color: '#fff',
                fontWeight: 'bold', // 坐标轴名称文字字体的粗细
                fontSize: 15
            },
            splitLine: {
                show: false, // x轴、y轴显示网格线,坐标轴在 grid 区域中的分隔线
                lineStyle: {
                    // 使用深浅的间隔色--分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                    color: ['#4F5258', '#30394F']
                }
            }
        },
            {
                splitLine: { show: false },
                gridIndex: 1
            }
        ],
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
            type: 'line', // 线条
            showSymbol: false, // 是否显示 symbol符号, 如果 false 则只有在 tooltip hover 的时候显示。
            data: valueList,
            lineStyle: { color: '#FFF' }, // 线条样式
        }
        ]
    }
    mychart.setOption(option);
    charts.push(mychart);


    ///图6
    mychart = echarts.init(main6);
    option = {
        // Make gradient line here
        backgroundColor: ['#6fdc4f'], // 全图默认背景
        grid: [{
            bottom: '10%'
        }, {
            top: '60%'
        }, {
            show: false,
            borderWidth: 1,
            // borderColor: '#FF0000' // 网格的边框颜色
        }],
        // 视觉映射组件，用于进行『视觉编码』
        visualMap: [{
            show: false, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
            type: 'continuous', // 定义为连续型 visualMap
            seriesIndex: 0, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列
            min: 0, // 指定 visualMapPiecewise 组件的最小值。
            max: 400
        }],
        title: [{
            left: 'left',
            text: '基准呼吸率连线图',
        }
        ],
        // 提示框组件
        tooltip: {
            trigger: 'axis' // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用/none什么都不触发
        },
        xAxis: [{
            data: date,
            show: true //是否显示x轴
        }, {
            data: dateList,
            show: false,
            gridIndex: 1 // x 轴所在的 grid 的索引，默认位于第一个 grid。
        }],
        yAxis: [{
            nameTextStyle: { // 坐标轴名称的文字样式。
                color: '#fff',
                fontWeight: 'bold', // 坐标轴名称文字字体的粗细
                fontSize: 15
            },
            splitLine: {
                show: false, // x轴、y轴显示网格线,坐标轴在 grid 区域中的分隔线
                lineStyle: {
                    // 使用深浅的间隔色--分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                    color: ['#4F5258', '#30394F']
                }
            }
        },
            {
                splitLine: { show: false },
                gridIndex: 1
            }
        ],
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
            type: 'line', // 线条
            showSymbol: false, // 是否显示 symbol符号, 如果 false 则只有在 tooltip hover 的时候显示。
            data: valueList,
            lineStyle: { color: '#FFF' }, // 线条样式
        }
        ]
    }
    mychart.setOption(option);
    charts.push(mychart);



    ///图7
    mychart = echarts.init(main7);

    var colors = ['#8180ff', '#ffd300', '#6fdc4f','#59b0ff']; //状态的颜色
    var state = ['深睡', '浅睡', '清醒', '体动']; //状态

    option = {
        color: colors,
        tooltip: {//提示框
            formatter: function (params) {
                return params.name + ':' + params.value[1] + '~' + params.value[2];
            }//数据的值
        },
        legend: {//图例
            data: state,
            bottom: '1%',
            selectedMode: false, // 图例设为不可点击
            textStyle: {
                color: '#000'
            }
        },
        grid: {//绘图网格
            left: '3%',
            right: '3%',
            top: '1%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'time',
            scale: true,
            interval: 3600 * 1000,   //以一个小时递增
            min: '2009/6/1 18:00', //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
            axisLabel: {
                formatter: function (value) {
                    var date = new Date(value); return getzf(date.getHours()) + ':00';
                    function getzf(num) {
                        if (parseInt(num) < 10) { num = '0' + num; }
                        return num;
                    }
                },
            }
        },
        yAxis: {
            data: ['深睡', '浅睡', '清醒','体动']
        },
        series: [
            // 用空bar来显示三个图例
            { name: state[0], type: 'bar', data: [] },
            { name: state[1], type: 'bar', data: [] },
            { name: state[2], type: 'bar', data: [] },
            { name: state[3], type: 'bar', data: [] },
            {
                type: 'custom',
                renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                    var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                    var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                    var end = api.coord([api.value(2), categoryIndex]);
                    var height = api.size([0, 1])[1];
                    return {
                        type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                        shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                            x: start[0],
                            y: start[1] - height / 2,
                            width: end[0] - start[0],
                            height: params.coordSys.height
                        }, { // 当前坐标系的包围盒。
                            x: params.coordSys.x,
                            y: params.coordSys.y,
                            width: params.coordSys.width,
                            height: params.coordSys.height
                        }),
                        style: api.style()
                    };
                },
                encode: {
                    x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
                    y: 0// data 中『维度0』对应到 Y 轴
                },
                data: [ // 维度0 维度1 维度2  	data: ['深睡', '浅睡', '清醒','体动']
                    {
                        itemStyle: { normal: { color: colors[3] } },//条形颜色
                        name: '体动',
                        value: [3, '2009/6/1 18:00', '2009/6/2 00:00']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                    },
                    {
                        itemStyle: { normal: { color: colors[2] } },//条形颜色
                        name: '清醒',
                        value: [2, '2009/6/2 00:00', '2009/6/2 01:00']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                    },
                    {
                        itemStyle: { normal: { color: colors[1] } },//条形颜色
                        name: '浅睡',
                        value: [1, '2009/6/2 01:00', '2009/6/2 01:20']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                    },
                    {
                        itemStyle: { normal: { color: colors[0] } },//条形颜色
                        name: '深睡',
                        value: [0, '2009/6/2 01:20', '2009/6/2 02:00']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                    },
                    {
                        itemStyle: { normal: { color: colors[1] } },//条形颜色
                        name: '浅睡',
                        value: [1, '2009/6/2 02:00', '2009/6/2 02:20']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                    },
                    {
                        itemStyle: { normal: { color: colors[0] } },//条形颜色
                        name: '深睡',
                        value: [0, '2009/6/2 02:20', '2009/6/2 06:00']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                    },
                    {
                        itemStyle: { normal: { color: colors[2] } },//条形颜色
                        name: '清醒',
                        value: [2, '2009/6/2 06:00', '2009/6/2 08:00']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
                    },
                ]
            }
        ]
    };


    mychart.setOption(option);
    charts.push(mychart);

    $(function () {

        $(".havior_body_right,#tb4_bottom").hide();
        $("#tb1").show()

        $(".havior_item").click(function () {
            $(".havior_item").removeClass("havior_item_check");
            $(this).addClass("havior_item_check");
            var id = $(this).attr("data-id");

            $(".havior_body_right,#tb4_bottom").hide();
            $("#" + id).show();
            if (id == "tb4")
                $("#tb4_bottom").show();
        });
    })




</script>